<template>
  <div>
    <el-row>
      <el-col :span="3">
        <div class="user-avatar">
          <img alt="" />
        </div>
      </el-col>
      <el-col :span="18">
        <li class="chatmsg msg_0b5f9538-2e64-4be8-8aa3-0e94672b4241 out deal">
          <p class="service-name service-name-right">
            <span class="agentMsgTime">{{
              time ||
              new Date().toLocaleTimeString("chinese", { hour12: false })
            }}</span>
            {{ nickname }}
          </p>
          <div class="outer-left">
            <div class="service bg-purple">
              <!-- 默认文字消息 -->
              <p>
                {{ msg }}
              </p>
            </div>
          </div>
        </li>
      </el-col>
      <el-col :span="3">
        <div class="user-avatar">
          <img :src="avatarUrl" alt="" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "MessageLeft",
  props: ["avatarUrl", "time", "nickname", "msg"],
  
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.service-name-right {
  display: block !important;
  text-align: right;
}
.service {
  padding: 7px;
  width: fit-content;
  float: right;
  border: 0px solid red;
  border-radius: 3%;
  margin-right: 2px;
}
.service p {
  text-align: left;
  width: fit-content;
}
.el-row {
  margin: 0 5px 20px 5px;
}
.user-avatar img {
  width: 40px;
  border: 0px solid red;
  border-radius: 10%;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
<style scoped>